<template>
    <div>
        <a-modal
            v-model:visible="visible"
            title="品种关键指标"
            @ok="handleOk"
            @cancel="visible = false"
            width="100%"
            wrapClassName="keyIndicators-Records-full-modal"
            :footer="null"
        >
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="{
                    api:assessCheckApi.spcyQyInfoqueryQyGjzbPageList,
                    rowId: 'id',
                    paramet:{
                        fpzid:formState.id,
                    }
                }" 
                :isCanWrap="true"
                :columns="keyIndicatorsColumnsVxe" 
                :formItem="[{
                    label: '项目名称',
                    model: 'fxmmc',
                }]"
                
            >  
                <template v-slot:externalOperations="{data}" v-if="!formState.isDisabled">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" @click="addClick(0)">新增</a-button>
                        </template>
                    </vxe-form-item>
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item v-if="!formState.isDisabled">
                            <a-button class="blue-btn" type="primary" @click="editClick(row,0)" >编辑</a-button>
                        </a-form-item>
                        <a-form-item v-if="!formState.isDisabled">
                            <a-button class="red-btn" type="primary" @click="deleteClick(row,0)" >删除</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
            <addEdit0 ref="addEditRef0" @editItem="editItem" @addItem="addItem" />
        </a-modal>
    </div>
</template>
<script>
import assessCheckApi from '../service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import {
    spcyQyInfoaddGjzb,
    spcyQyInfoupdateGjzb,
    spcyQyInfodeleteGjzb,
    
} from '../service/index'
import addEdit0 from './addEdit0.vue'
export default {
    components:{
        commpVxeTable,
        addEdit0,
    },
    props:{

    },
    data(){
        return{
            refreshTable:null,
            visible:false,
            assessCheckApi:assessCheckApi,
            formState:{},
            keyIndicatorsColumnsVxe:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '项目名称',
                field: 'fxmmc',
            },{
                title: '警戒限',
                field: 'fjjx',
            },{
                title: '行动限',
                field: 'fhdx',
            },{
                title: '合格限',
                field: 'fhgx',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:180,
                fixed:'right'
            }],
            methodList:[{
                name:'关键指标',
                editName:spcyQyInfoupdateGjzb,
                deleteName:spcyQyInfodeleteGjzb,
                addName:spcyQyInfoaddGjzb,
            }],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            //console.log(row)
            this.formState = row
            this.refreshTable = Date.now()
        },
        handleOk(){

        },
        addClick(index){
            let refName = 'addEditRef'+index
            this.$refs[refName].getData({fqyid:this.formState.fqyid,fpzid:this.formState.id,index:index})
            this.$refs[refName].visible = true
        },
        editClick(val,index,view){
            //console.log(val)
            let refName = 'addEditRef'+index
            this.$refs[refName].getData({fqyid:this.formState.fqyid,fpzid:this.formState.id,view:view?true:false,...val,index:index,})
            this.$refs[refName].visible = true
        },
        addItem(val,vis,isTip){
            //console.log('新增',val)
            let refName = 'addEditRef'+val.index
            this.methodList[val.index].addName(val).then(res=>{
                if(res.code == 200){
                    this.refreshTable = Date.now()
                    if(!isTip){
                        this.$message.success(res.message)
                    }
                    
                    this.$refs[refName].getData({fqyid:this.formState.fqyid,fpzid:this.formState.id,...val,id:res.result.id})
                    this.$refs[refName].visible = vis
                    //console.log(res)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        editItem(val,vis){
            //console.log('编辑',val)
            let refName = 'addEditRef'+val.index
            this.methodList[val.index].editName(val).then(res=>{
                if(res.code == 200){
                    this.refreshTable = Date.now()
                    this.$message.success(res.message)
                    this.$refs[refName].visible = vis
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        deleteClick(val,index){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    that.methodList[index].deleteName({id:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.refreshTable = Date.now()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
    }
}
</script>
<style lang="less">
.keyIndicators-Records-full-modal{
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }
    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
        overflow-y: auto;
    }
    .ant-modal-body {
        flex: 1;
    }
}
</style>